<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三.练习</title>
    <style>
        #info{
            width: 400px;
            height: 500px;
            background-color: #bfa;
            /* overflow: scroll; */
            overflow: auto;
        }

    </style>
    <script>
        window.onload=function(){
            /* 
                当垂直滚动条滚动到底时，表单项可以用
                onsroll
                -该事件会在元素的滚动条滚动时触发
            */
           //滚动条是谁的获取谁
           var info=document.getElementById("info");
           var inputs=document.getElementsByTagName("input");
           //滚顶条滚动是一个事件，为info绑定一个滚动条滚动的事件
           info.onscroll=function(){
            //    alert("我滚了");
               if(info.scrollHeight-info.scrollTop==info.clientHeight){
                   //滚动条滚动到底了，要使表单项可用
                /* 
                    disabled属性可以设置一个元素是否禁用
                    如果设置为false，则元素可用
                    如果设置为true，则元素禁用
                */
                inputs[0].disabled=false;
                inputs[1].disabled=false;
               }
           }

        }
    </script>
</head>
<body>
    <h3>欢迎亲爱的用户注册</h3>
    <p id="info">
        亲爱的用户，请仔细阅读以下协议i，如果你不仔细阅读，你就别注册
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium dolorem nulla deserunt aut, sunt veniam perspiciatis. Commodi enim ducimus eius excepturi sed, et fugit sint quasi quo dicta nam est.
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium dolorem nulla deserunt aut, sunt veniam perspiciatis. Commodi enim ducimus eius excepturi sed, et fugit sint quasi quo dicta nam est.
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium dolorem nulla deserunt aut, sunt veniam perspiciatis. Commodi enim ducimus eius excepturi sed, et fugit sint quasi quo dicta nam est.
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium dolorem nulla deserunt aut, sunt veniam perspiciatis. Commodi enim ducimus eius excepturi sed, et fugit sint quasi quo dicta nam est.
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium dolorem nulla deserunt aut, sunt veniam perspiciatis. Commodi enim ducimus eius excepturi sed, et fugit sint quasi quo dicta nam est.
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium dolorem nulla deserunt aut, sunt veniam perspiciatis. Commodi enim ducimus eius excepturi sed, et fugit sint quasi quo dicta nam est.
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium dolorem nulla deserunt aut, sunt veniam perspiciatis. Commodi enim ducimus eius excepturi sed, et fugit sint quasi quo dicta nam est.
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium dolorem nulla deserunt aut, sunt veniam perspiciatis. Commodi enim ducimus eius excepturi sed, et fugit sint quasi quo dicta nam est.
    </p>
    <!-- 如果为表单项添加disabled，则表单项将变成不可用的状态 -->
    <input type="checkbox" disabled="disabled">我已经仔细阅读协议一定会遵守
    <input type="submit" value="注册" disabled="disabled">
     
</body>
</html>